<template>
     <div class="demo-drawer-profile">
            <Row>
                <Col span="12">
                    编号: {{ row.id }}
                </Col>
                <Col span="12">
                    资源名: {{ row.resourceName }}
                </Col>
            </Row>
            <Row>
                <Col span="12">
                    所属分类:  {{ row.typeName }}
                </Col>
                <Col span="12">
                    上传者:  {{ row.nickName ?? row.tel }}
                </Col>
            </Row>
           <Row>
             <Col span="12">
               上传时间: {{ row.createTime }}
             </Col>
             <Col span="12">
               资源大小: {{getSizeDisplay(row.size)}}
             </Col>
           </Row>
            <Row>
                <Col span="12">
                    扩展名: {{row.ext}}
                </Col>
                <Col span="12">
                    积分: {{row.score}}
                </Col>
            </Row>
           <Row>
             <Col span="24">
               资源关键字:
               <template v-if="row.keywords">
                 <Tag color="default" v-for="(key, index) in row.keywords.split('::')" :key="key">{{ key }}</Tag>
               </template>
             </Col>
           </Row>
        </div>
        <Divider />
        <Row>
            <Col span="24">
                资源描述: {{ row.resourceDesc == null || row.resourceDesc == "" ? '暂无' : row.resourceDesc }}
            </Col>
        </Row>
        <Divider />
</template>

<script setup>
const {row} = defineProps({ row: {type: Object, required: true} })
// 处理资源大小
function getSizeDisplay(size) {
    if (size == null) return 0 ;
    if (size > 1 << 30) return (size / (1 << 30)).toFixed(1) + "GB";
    if (size > 1 << 20) return (size / (1 << 20)).toFixed(1) + "MB";
    if (size > 1 << 10) return (size / (1 << 10)).toFixed(1) + "kB";
    return size + "B";
}
</script>

<style>
.demo-drawer-profile{
	font-size: 14px;
}
.demo-drawer-profile .ivu-col{
	margin-bottom: 12px;
}
.ivu-row {
	margin-bottom:20px;
}
</style>